<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.active {
				padding: 10px;
				background: gray;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<child level="1">
				 hello world 1
			</child>
			<child level="2">
				 hello world 2
			</child>
			<child level="3">
				 hello world 3
			</child>
			<child level="4">
				 hello world 4
			</child>	
		</div>
	</body>
</html>

<script type="text/javascript">
	let num = 1;
	const child = {
		props: ['level'],
		created() {
			
		},
		render(createElement) {
				console.log(num++);
				return createElement(
				// 第一个参数创建的标签的名称
				'h'+this.level,
				// 第二参数用来设置属性和样式
				{
					class: {
						active: this.level==2
					},
					style: {
						border: '1px solid green'
					},
					attrs: {
						id: 'aaa'
					}
				},
				// this.$slots.default是父组件传过来的内容
				`这是 h${this.level} 标签`
			)
		}
	}
	
	new Vue({
		el: '#app',
		data: {
			level: 2
		},
		components: {
			child
		}
	})
	
	
	
</script>
